<!--王嘉欣-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>题解</title>
    <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Bootstrap 4-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        .contain {
            width: 500px;
            height: 50px;
            margin: 100px auto;
        }

        .parent {
            width: 100%;
            height: 42px;
            top: 4px;
            position: relative;
        }
        .parent > input:first-of-type {
            /*输入框高度设置为40px, border占据2px，总高度为42px*/
            border-radius: 8px;
            width: 380px;
            height: 43px;
            border: 1px solid #ccc;
            font-size: 16px;
            outline: none;
            margin-right: 20px;
        }

        .parent > input:first-of-type:focus {
            border: 1px solid #317ef3;
            padding-left: 10px;
        }

        .parent > input:last-of-type {
            /*button按钮border并不占据外围大小，设置高度42px*/
            width: 100px;
            height: 44px;
            position: absolute;
            background-color: #5bc0de;
            border: 1px solid #3ed4e8;
            border-radius: 8px;
            color: #fff;
            font-size: 16px;
            outline: none;
        }
        .parent > input:last-of-type:hover{
            background-color: #97d3e7;
        }
        .dropbtn {
            background-color: transparent;
            color: white;
            margin-left: 35px;
            margin-right: 35px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        .dropdown {
            position: relative;
            display: inline-block;text-align: center;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            width: 100%;;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .dropdown:hover .dropbtn {
            background-color: transparent;
        }
        /*导航栏样式*/
        .navbar {
            background-color: #222;
        }
        #daohang {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: transparent;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        /*!*鼠标移动到选项上修改背景颜色 *!*/
        li a:hover {
            background-color: #111;
        }
        .active {
            background-color: black;
        }
        /*按钮样式*/
        #my-button{
            background-color: #5bc0de;
            color:white;
            width: 100px;
            height: 45px;
            border:0;
            font-size: 16px;
            box-sizing: content-box;
            border-radius: 5px;
        }
        #my-button:hover{
            background-color: #97d3e7;
        }
        /*  页码样式  */
        ul{
            height:100%;
            list-style-type:none;
        }

        li{
            line-height:20px;
            float:left;
        }

        button {
            font-size: 17px;
            height: 30px;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 5px;
            padding-bottom: 5px;
            color: #fff;
            background-color: #5bc0de;
            border: 0;
            border-radius: 10px;
        }
        button:hover{
            background-color: #97d3e7;
        }

        .even
        {
            background-color: white;
        }

    </style>
</head>
<body>
<h2 id="Qtitle"></h2>
<nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
    <a class="navbar-brand font-weight-bold" href="index.html">别叫我 OJ </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <ul id="daohang">
        <li>
            <div id="detail" align="right">
                <a style="color: white" href="questionDetail.html" onclick="findQuestion()">问题详情</a>
            </div>
        </li>
        <li>
            <div id="remind" align="right">
                <a style="color: white" href="submitRecord.html">提交记录</a>
            </div>
        </li>
        <li>
            <div class="active" id="analyze" align="right">
                <a style="color: white" href="answer.html">题解</a>
            </div>
        </li>
    </ul>
    <div class="collapse navbar-collapse" id="topMenu">
        <ul class="navbar-nav ml-auto">
            <div style="margin:5px" id="javaoj" align="right">
                <a style="color: white;display: inline-block;margin-right: 20px" href="index.html"> 返回首页</a>
                <a style="color: white;" href="login.html" onclick="logout()"> 退出登录</a>
<!--                <div class="dropdown">-->
<!--                    <button class="dropbtn">设置</button>-->
<!--                    <div class="dropdown-content">-->
<!--                        <a href="updateInfo.html">修改个人信息</a>-->
<!--                        <a href="updatePassword.html">修改密码</a>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
        </ul>
    </div>
</nav>

<div class="contain" style="padding-top: 80px">
    <form action="" class="parent">
        <input type="text" name="searchContent" placeholder="&nbsp;&nbsp;输入题解内容来查询">
        <input type="button" onclick="searchByContent()" value="搜索" style="cursor: pointer">
    </form>
</div>
<section class="my-5 pt-5">
    <div class="container">
        <div class="row mb-5" id="tables">
            <div class="col-sm-12" style="background-color: white">
                <div class="mt-3 mb-5">
                    <div>
                        <a><button id="my-button" style="float: right;display: block;margin-bottom: 20px;margin-right: 30px" >我也来写题解</button></a>
                    </div>
                    <div id="content" style="font-size: xx-large; text-align: center; color: red"></div>
                    <table class="table table-striped" style="background-color: #f5f5f5">
                        <thead>
                        <tr>
                            <th>标题</th>
                            <th>用户</th>
                            <th>题解内容</th>
                            <th>查看详情</th>
                        </tr>
                        </thead>
                        <tbody id="answerTable">
                        </tbody>
                    </table>
                </div>
            </div>
            <!--  页码  -->
            <div style="margin: 0 auto">
                <div class="mt-3 mb-5">
                    <ul style="font-size: 12px;">
                        <li class="page_li">
                            <button class="page_btn" onclick="firstPage()">首页</button>
                        </li>
                        <li class="page_li" style="margin-left: 20px">
                            <button class="page_btn" onclick="previousPage()">上一页</button>
                        </li>
                        <li class="page_li" style="margin-left: 20px">
                            <button class="page_btn" id="midPage"></button>
                        </li>
                        <li class="page_li" style="margin-left: 20px">
                            <button class="page_btn" onclick="nextPage()">下一页</button>
                        </li>
                        <li class="page_li" style="margin-left: 20px">
                            <button class="page_btn" onclick="lastPage()">末页</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!--footer-->
<section class="py-5 bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                <p class="pt-2 text-muted">
                    &copy; by <a href="aboutUs.html" target="_blank">别叫我们组</a>
                </p>

            </div>
        </div>
    </div>
</section>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type="text/javascript">
    var userId = localStorage.getItem("userId");
    let nowPage=1;
    let totalPage=1;
    //获取题解的部分信息
    var problemId = localStorage.getItem("questionId");
    // 如果本机cookie没有数值，则赋初值
    if(problemId==undefined){
        problemId=1;
    }
    getPage(nowPage);
    document.getElementById('my-button').addEventListener('click', function() {
        location.assign("md-editor/editor.md-master/examples/simple.html?id=" + problemId)
    })
    function getPage(nowPage) {
        $.ajax({
            url: "http://localhost:8020/question/queryAnswerList?questionId=" + localStorage.getItem("questionId") + "&page=" + nowPage + "&size=10",
            type: "GET",
            success: function (data, status) {
                makeTable(data);
            },
        })
    }

    function findQuestion () {
        $.ajax({
            url:"http://localhost:8020/question/findQuestion/" + localStorage.getItem("questionId"),
            contentType:"application/json; charset=utf-8",
            success:function (object) {
                console.log(object);
                const data = object.data;
                // 题目
                $("#questionTitle").text(data.id + ". " + data.title);
                // 问题描述
                $("#questionDesc").text(data.description);
                // 输入格式
                $("#inputDesc").text(data.inputDescription);
                // 输出格式
                $("#outputDesc").text(data.outputDescription);
                // 内存限制
                $("#memoryLimit").text(data.memoryLimit);
                // 时间限制
                $("#timeLimit").text(data.timeLimit);
                // 输入样例
                const input = JSON.parse(data.inputList).input1;
                $("#input").text(input);
                // 输出样例
                const output = JSON.parse(data.outputList).output1;
                $("#output").text(output);
            }
        })
    }

    function makeTable(data) {
        //判断数据库中是否有数据
        if (data.data == null){
            console.log("没有相关题目");
            $('table').remove();
            let content = document.getElementById("content");
            content.innerHTML="题解表中没有满足要求的题目";
            content.id="noContent";
        }
        //判断表格中是否有内容，如果有，删掉
        if($("table tr").length != 0){
            $('table').find('tr:gt(0)').remove();
        }
        let mid=document.getElementById("midPage");
        //获得表格
        if(data.data.content != undefined){
            getTable(data.data.content);
            totalPage = data.data.totalPages;
            mid.innerHTML="第"+nowPage+"页/"+"第"+totalPage+"页";
        }else {
            mid.innerHTML="第1页/第1页";
            getTable(data.data);
        }
        //表格单双行变色
        $().ready(function(){
            $('tr:even').addClass('even');
        });
    }
    function getTable(content){
        //获取id为analyzeTable的元素
        let answerTable=document.querySelector("#answerTable");
        //将内容循环放入表格
        for (let answer of content) {
            let tr = document.createElement("tr");
            //标题
            let tdTitle = document.createElement("td");
            $.ajax({
                url:"http://localhost:8020/question/findQuestion/" + answer.questionId,
                type:"GET",
                success:function(data){
                    tdTitle.innerHTML = data.data.title;
                },
            })
            tr.appendChild(tdTitle);
            //用户名
            let username = document.createElement("td");
            //根据用户id获取用户的名字
            $.ajax({
                url:"http://192.168.47.129:8010/user/findUserById/" + answer.userId,
                type:"GET",
                success:function(data,status){
                    username.innerHTML = data.data.username;
                },
            })
            tr.appendChild(username);
            //创建内容
            let content = document.createElement("td");
            let text = answer.content;
            //删掉 # 符号
            var html=text.replace(/#/g, '');
            //删掉 ` 符号
            html=html.replace(/`+/g, '');
            //删掉空格
            html = html.replace(/\s+/g,"");
            //题解标题（取前十个字作为标题）
            if(html.length<10){
                content.innerHTML = html;
            }
            else {
                content.innerHTML = html.substring(0,10)+"...";
            }
            tr.appendChild(content);
            //查询详情超链接
            let detail = document.createElement("td");
            let aD = document.createElement("a");
            aD.innerHTML="进入详情";
            aD.href = "answerDetail.html?answerId=" + answer.id;
            detail.appendChild(aD);
            tr.appendChild(detail);
            answerTable.appendChild(tr);
            // tr点击事件，跳转题解详情页
            tr.addEventListener("dblclick", function (){
                goDetail(answer.id);
            });
        }
    }

    function goDetail(id){
        javascript:window.location.href="answerDetail.html?answerId=" + id;
    }

    //获取指定name的cookie值
    function getCookie(name){
        var arr1=document.cookie.split(";");
        for(var i=0;i<arr1.length;i++){
            var arr2=arr1[i].split("=");//通过=截断，把name=Jack截断成[name,Jack]数组；
            if(i != 0){
                var now = " " + name;
            }else {
                var now=name;
            }
            if(arr2[0]==now){
                return decodeURI(arr2[1]);
            }
        }
    }

    //设置页码的函数
    //首页函数
    function firstPage(){
        nowPage=1;
        getPage(nowPage);
    }
    //末页函数
    function lastPage(){
        nowPage=totalPage;
        getPage(totalPage);
    }
    //上一页函数
    function previousPage(){
        //如果当期页是第一页
        if(nowPage == 1){
            nowPage=2;
        }
        nowPage--;
        getPage(nowPage);
    }
    //下一页函数
    function nextPage(){
        //如果当前页是最后一页
        if (nowPage == totalPage){
            nowPage--;
        }
        nowPage++;
        getPage(nowPage);
    }
    //获取用户登录信息，获取失败则返回登录页面
    function getUser(){
        if (userId==null){
            location.assign("login.html");
        }
    }
    function logout(){
        localStorage.clear();
    }

    //点击搜索框到数据库查找题解的函数
    function searchByContent() {
        var searchContent=$('input[name="searchContent"]').val();
        $.ajax({
            url: "http://localhost:8020/question/queryAnswerByContent?content=" + searchContent + "&questionId=" + localStorage.getItem("questionId") ,
            type: "GET",
            success: function (data, status) {
                console.log(data);
                makeTable(data);
            }
        })
    }
    getUser();

</script>
</body>
</html>